<template>
  <div id="MessageCom">
    <!-- 评论区 -->
    <div
      class="person-main-Cmessage"
      v-for="item in blogMessage"
      :key="item.id"
    >
      <img :src="item.user.avatar" alt="" />
      <div>
        <p v-text="item.user.username"></p>
        <p v-html="item.content"></p>
        <p v-if="item.messageList" class="children-item">
          <!-- <message-com :blogmessage = "item.messageList"></message-com> -->
          <!-- {{ item.messageList }} -->
          <slot name="messageList" :messageList = "item.messageList"></slot>
        </p>
        <span
          v-if="item.user.username == curUser.username"
          @click="messageDelete(item.id)"
        >
          <svg
            class="icon"
            width="200"
            height="200"
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            data-v-042ca774=""
          >
            <path
              fill="currentColor"
              d="M466.752 512l-90.496-90.496a32 32 0 0145.248-45.248L512 466.752l90.496-90.496a32 32 0 1145.248 45.248L557.248 512l90.496 90.496a32 32 0 11-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 01-45.248-45.248L466.752 512z"
            ></path>
            <path
              fill="currentColor"
              d="M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"
            ></path>
          </svg>
        </span>
      </div>
    </div>

  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";


export default {
  components: {},
  props: {
    blogMessage: {
      type: Array,
      default: function () {
        return [];
      },
    },
    curUser: this.GET_CURRENTUSER(),
  },
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    ...mapGetters("user",[,"GET_CURRENTUSER"]),
    messageDelete(messageId) {
      ElMessageBox.confirm("确认删除?", "Warning", {
        confirmButtonText: "OK",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        request
          .delete("/fore/message/delete", {
            params: {
              id: messageId,
            },
          })
          .then((res) => {
            if (res.code == 200 || res.code == 0) {
              this.$parent.load();
            }
          });
      });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.person-main-Cmessage {
  display: flex;
  width: 100%;
  min-height: 100px;
  padding: 10px 0;
  margin-bottom: 50px;

  img {
    width: 70px;
    height: 70px;
    border-radius: 35px;
    overflow: hidden;
    margin-top: 10px;
  }

  div {
    position: relative;
    width: 87%;
    min-height: 150px;
    margin-left: 30px;
    border-top: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
    padding: 2px 0;

    p {
      height: 25px;
      line-height: 25px;
      margin: 5px 0;
    }
    svg {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 20px;
      height: 20px;
      margin-bottom: 10px;
    }
  }
  svg {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    margin-bottom: 25px;
    margin-left: 15px;
  }
}
</style>
